<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #list {
                    -webkit-padding-start: 0px;
                    padding-inline-start: 0px;

            }
            #list li {
                list-style-type: none;
                width: 100px;
                height: 50px;
                line-height: 50px;
                background-color: beige;
                text-align: center;
                float: left;
              }
        
              #list li.current {
                background-color: red;
              }
        
              #list li a {
                text-decoration: none;
              }
            </style>
    </head>
    <body>
        <p id="width">1. 获取浏览器高度...</p>
        <p id="height">2. 获取浏览器宽度...</p>
        <P></P>
        <P></P>
        <p onclick="this.innerHTML = '我爱学习，身体好好!'">onclick事件</p>
        <p ondblclick="changetext(this)">ondblclick事件</p>
        <script>
            function changetext(obj) {
                obj.innerHTML = '我爱学习，身体棒棒!';
            }
        </script>
        <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:orange;width:200px;height: 50px;"></div>

        <script type="text/javascript">
            function mOver(obj) {
                obj.innerHTML = "你来了。。。"
            }

            function mOut(obj) {
                obj.innerHTML = '哎，别走呀。'
            }
        </script>


        <div id="menu">
            <ul id="list">
                <li class="current">
                    <a href="javascript:void(0)">首页</a>
                </li>
                <li>
                    <a href="javascript:void(0)">关于</a>
                </li>
                <li>
                    <a href="javascript:void(0)">帮助</a>
                </li>
            </ul>
        </div>


        <script>
            // 获取所有的 li 标签
            var liObjs = document.getElementById('list').getElementsByTagName('li');
            // 循环遍历，找到每个 li 中的 a，注册点击事件
            for (var i = 0; i < liObjs.length; i++) {
                // 每个 li 中的 a
                var aObj = liObjs[i].firstElementChild;

                aObj.onclick = function() {
                    // 把这个 a 所在的 li 的所有的兄弟元素的类样式全部移除
                    for (var j = 0; j < liObjs.length; j++) {
                        liObjs[j].removeAttribute('class');
                    }
                    //当前点击的 a 的父级元素 li(点击的这个 a 所在的父级元素 li)，设置背景颜色
                    this.parentNode.className = 'current';
                };
            }
        </script>


    </body>
</html>


<script type="text/javascript">
    //window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可以省略 window。
    window.onload = function() {
        // 当页面加载完成执行
        // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
    };

    window.onunload = function() {
        // 当用户退出页面时执行
    };

    // 浏览器尺寸
    var width = window.innerWidth;
    document.documentElement.clientWidth;
    document.body.clientWidth; // 150px   <body style="height: 100px;width: 150px;">

    var height = window.innerHeight;
    document.documentElement.clientHeight;
    document.body.clientHeight; // 100px  <body style="height: 100px;width: 150px;">



    // setTimeout() 方法在指定的毫秒数到达之后执行指定的函数，只执行一次。

    // 创建一个定时器，2000毫秒后执行，返回定时器的标示
    var timerId = setTimeout(function() {
        document.getElementById('width').innerHTML = "宽度是" + width;
        document.getElementById('height').innerHTML = "高度是" + height;
        document.getElementsByTagName('p')[1].innerHTML = 'innerHTML';
        document.getElementsByTagName('p')[2].textContent = 'textContent'
        document.getElementsByTagName('p')[3].innerText = 'innerText'


    }, 2000);

    // 取消定时器的执行
    // clearTimeout(timerId);


    // 创建一个定时器，每隔 2 秒调用一次
    var timerId = setInterval(function() {
        var date = new Date();
        console.log(date.toLocaleTimeString());
        var items = ["blue", "red", "BlueViolet", "Chocolate", "DarkBlue", "DarkMagenta", "Fuchsia "]

        var color = items[Math.floor(Math.random() * items.length)];
        console.log(color);
        var obj = document.getElementById("width");
        obj.style.color = color;
    }, 2000);

    // 取消定时器的执行
    // clearInterval(timerId);



    /*
     **************************   事件   ****************************
     * onclick	    鼠标单击
     * ondblclick	鼠标双击
     * onkeyup	    按下并释放键盘上的一个键时触发
     * onchange	    文本内容或下拉菜单中的选项发生改变
     * onfocus	    获得焦点，表示文本框等获得鼠标光标。
     * onblur	    失去焦点，表示文本框等失去鼠标光标。
     * onmouseover	鼠标悬停，即鼠标停留在图片等的上方
     * onmouseout	鼠标移出，即离开图片等所在的区域
     * onload	    网页文档加载事件
     * onunload	    关闭网页时
     * onsubmit	    表单提交事件
     * onreset	    重置表单时
     */
</script>
